<template>
    <div class="addPay pb-10">
        <fx-header>
            <template #title>{{ $t('add') }} {{ $t(`${data.name}`) }}</template>
        </fx-header>
        <van-form @failed="onFailed">
            <van-cell-group inset>
                <p class="pt-6 pb-2 ash">{{ $t('BankAccount') }}</p>
                <van-field class="select-item" v-model="data.name" disabled name="pattern"
                    :placeholder="$t('enterBankAccount')">

                </van-field>
            </van-cell-group>
            <van-cell-group inset>
                <p class="pt-6 pb-2 ash">{{ $t('realName') }}</p>
                <van-field class="select-item" v-model="name" :maxlength="10" name="pattern" :placeholder="$t('entryRealName')">
                </van-field>
            </van-cell-group>
            <van-cell-group inset>
                <p class="pt-6 pb-2 ash">{{ $t('Bankcardnumber') }}</p>
                <van-field class="select-item" v-model="bankCard" :maxlength="25"  name="bankCard" clearable
                    :placeholder="$t('enterBankcardnumber')">
                </van-field>
            </van-cell-group>
            <van-cell-group inset>
                <p class="pt-6 pb-2 ash">{{ $t('Remarksoptional') }}</p>
                <van-field class="select-item-textarea" v-model="note" :maxlength="100" type="textarea" name="picker" clearable
                    :placeholder="$t('Remarks')">
                </van-field>
            </van-cell-group>
        </van-form>
        <div class="tips mx-4 mt-8 px-4 pt-4 pb-4">
            <div class="flex tip-title">
                <img class="mr-2" src="@/assets/image/Record/icon4.png" />
                {{ $t('specialReminder') }}
            </div>
            <div class="pl-4 ash mt-2 font-13">{{ $t('tips1') }}</div>
        </div>
        <div class="font-13 mt-20 ash px-4">{{ $t('tips12') }}</div>
        <div class="px-4 pt-6 mt-3">
            <van-button class="w-full" type="primary" @click="debounceSubmit">{{ $t('submit') }}</van-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _getAddPaymentMethod, _getUpdatePaymentMethod } from "@/service/trade.api.js";
import { useUserStore } from "@/store/user.js";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
import { debounce } from '@/utils/index'

const { t } = useI18n()
const useStore = useUserStore();
const route = useRoute()
const router = useRouter()
let name = ref('')
let bankCard = ref()
let note = ref('')
let id = ref('')
let type = ref('')
const onFailed = (errorInfo) => {
    console.log('failed', errorInfo);
};
const data = ref({})

onMounted(async () => {
    data.value = JSON.parse(sessionStorage.getItem("editAdd")) || {}
    name.value = data.value.realName || ''
    bankCard.value = data.value.paramValue1 || ''
    id.value = data.value.id || ''
    type.value = data.value.type || ''
    note.value = data.value.remark || ''
})

const submit = () => {
    let params = {}
    if (!name.value) {
        showToast(t('entryName'))
        return
    }
    if (!bankCard.value) {
        showToast(t('enterBankcardnumber'))
        return
    }
    if (type.value === 'add') {
        params = {
            token: useStore.userInfo.token,
            method_config_id: id.value,
            real_name: name.value,
            param_value1: bankCard.value,
            qrcode: '',
            remark: note.value
        }
        //添加支付方式
        _getAddPaymentMethod(params).then(res => {
            router.push('/payMentMethod/list')
        })
    } else {
        params = {
            token: useStore.userInfo.token,
            id: id.value,
            method_config_id: id.value,
            real_name: name.value,
            param_value1: bankCard.value,
            qrcode: '',
            remark: note.value
        }
        _getUpdatePaymentMethod(params).then(res => {
            router.push('/payMentMethod/list')
        })
    }

}

const debounceSubmit = debounce(function () {
    submit()
}, 500)

</script>
<style lang="scss" scoped>
.addPay {
    font-size: 14px;
    .select-item {
        padding: 0 15px;
        align-items: center;
        height: 50px;
        border-radius: 3px;
    }

    .select-item-textarea {
        background: $tab_background;
        padding: 0 15px;
        align-items: center;
        height: 120px;
        border-radius: 3px;
        color: $text_color;
    }

    .ash {
        color: $text_color1;
    }

    .tips {
        background: $tab_background;
        border-radius: 3px;

        .tip-title {
            font-weight: bold;
            align-items: center;

            img {
                width: 20px;
                height: 20px;

            }
        }
    }
}

:deep(.van-cell-group) {
    background: transparent;
}

:deep(.van-cell) {
    background: $tab_background;
    color: $text_color;

    input {
        color: $text_color;
    }
}
:deep(.van-field__control ) {

    color: $text_color;

  
}
</style>